

<template>
  <div>
    <basic-container>
      <avue-crud :option="tableOption" :data="tableData" :table-loading="tableLoading" :page="page" ref="crud" @size-change="sizeChange" @current-change="currentChange" @row-click="handleClick">

        <template slot="menuLeft">
          <el-button type="primary" @click="handleWithdraw()" size="small">提现</el-button>
        </template>

        <template slot-scope="scope" slot="card_number">
          {{scope.row.bank.card_number}}
        </template>
      </avue-crud>
      <el-dialog title="提现操作" :visible.sync="withdrawShow" width="30%" label-width="80px">
        <el-form label-width="80px">
          <el-form-item label="账户余额">
            <el-input v-model="info.money" disabled></el-input>
          </el-form-item>
          <el-form-item label="提现金额">
            <el-input type="number" min="0.00" step="0.01"  v-model="info.withdraw"></el-input>
          </el-form-item>
          <el-form-item label="银行卡">
            <el-select v-model="selectBank" placeholder="请选择">
              <el-option v-for="item in info.bankList" :key="item.id" :label="item.card_number" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="输入密码">
            <el-input type="password"></el-input>
          </el-form-item>
        </el-form>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
/* eslint-disable */
import { mapGetters } from "vuex";
import crudMixin from '@/mixins/crud'
import options from "./options.js";
import { isNull, arr2pojo, obj2pojo, validateResponse } from "@/util/util";
import { successMsg, errorMsg } from "@/util/message"
import { field, reField } from "./field";

export default {
  name: "role",
  mixins: [crudMixin],
  components: {
  },
  data() {
    return Object.assign({}, options, {
      withdrawShow: false,
      info: {
        money:'',
        bankList:''
      },
      selectBank:''
    })
  },
  created() {
    //初始化数据格式
    this.handleList();
  },
  watch: {
    "$route": "handleList"
  },
  mounted() { },
  computed: {
  },
  props: [],
  methods: {

    handleList(init = false) {
      if (init)
      {
        this.page.currentPage = 1
      }
      this.tableLoading = true;

      let param = {
        perPage: this.page.pageSize,
        page: this.page.currentPage
      };
      var vm = this
      this.$store
        .dispatch("GetWithdraw", param)
        .then(
          res => {
            this.tableLoading = false;
            if (res.data.status == 1) {
              let _data = res.data.result.data || []
              let _meta = res.data.result.meta || []

              this.tableData = _data;
              this.page.total = _meta.total;
            }
          }, error => {
            this.tableLoading = false;
          })
    },
    handleWithdraw() {
      this.tableLoading = true;
      var vm = this
      var param = {}
      this.$store
        .dispatch("GetWithdrawInfo", param)
        .then(
          res => {
            this.tableLoading = false;
            if (res.data.status == 1) {
              vm.withdrawShow = true
              vm.info = res.data.result.data
              vm.getDefaultBank()
            }
          }, error => {
            this.tableLoading = false;
          })
    },
    getDefaultBank(){
      var vm = this
       vm.info.bankList.forEach(element => {
           if (element.default){
             vm.selectBank = element.id
           }
       });
    }
  }
};
</script>

<style lang="scss" scoped>
.table-container {
  padding: 8px 10px;
}
</style>
